import router from './router'
// 路由跳转的进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import store from './store'
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

// 白名单 : 无需登录, 可以跳转查看的路由地址(在路由表里)
const whiteLsit = ['/login', '/404']

// 问题 : 什么是路由(导航)守卫
// 答案 : 当路由发生跳转的时候, 会触发一个钩子 "函数", 在函数中可以通过跳转或取消或强制切换跳转地址来守卫导航
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  // 获取token
  const token = store.getters.token
  // console.log(token)
  // 判断token
  if (token) {
    // 有token, 路径为登录页
    if (to.path === '/login') {
      // 强制去首页
      next('/')
      // 关闭
      NProgress.done()
    } else {
      // 有token 可以去别的页面,正常放行
      next()
      // 为何不写在dashboard 首页去请求呢?
      // 因为用户上来要进入别的页面, 我右上角还是需要用户信息, 所以在路由跳转请求
      // 为何在next()后面,先让页面跳转, 再发请求, 如果遇到401强制回到登录页, 最后做 登录未遂地址, 要让路由跳转完成先, 然后再发请求才能拿到当前路由页面
      // 如果没有拿到getters映射的name名字, 就调用user下获取用户信息的接口

      // 如果手动让cookie里token改错误, 刷新以后,vuex才会从本地取出错误token
      // 刷新时，路由守卫会从 / 跳转到地址栏里路由地址, 所以先让页面跳转进去
      // 执行下面请求会401,被动退出时,才能拿到跳转后的路由地址(未遂地址给登录页面, 否则next在下面, 未遂地址一直是 /)
      if (!store.getters.name) {
        store.dispatch('user/getUserInfoActions')
      }
    }
  } else {
    // 没有token, 路径为登录页
    // 白名单, 没有token 可以去登录页和404页面
    if (whiteLsit.includes(to.path)) {
      // 要去的路由地址字符串, 是否在白名单数组里出现过,出现过就放行
      // 没有token,去登录页正常放行
      next()
    } else {
      // 没有token , 去别的页面, 强制去登录页
      next('/login')
      NProgress.done()
    }
  }
})

// 验证 : 把本地cookie里token手动删除掉, 刷新, 看看是否走最后一个else内
router.afterEach((to, from) => {
  document.title = getPageTitle(to.meta.title)
  // 正常next()放行了跳转了, 才会走后置守卫, 关闭正常流程进度条
  NProgress.done()
})
